<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>HTTP-Flv Test</title>
</head>
<body style="background-color: #666666">
<div id="xxoo" style="background-color: #333333;border-radius: 10px; overflow: hidden; width: 400px; height: 300px;">
  <video style="width: 100%; height: 100%;"></video>
<!--  <video autoplay controls style="width: 100%; height: 100%;"></video>-->
</div>
<input id="tag" value="013305622219-2">

<button onclick="playVideo()">Play Video</button>
<div>
  <button onclick="playVideo()">播放</button>
  <button onclick="wzSuspended()">暂停</button>
  <button onclick="stopPlay()">停止</button>
</div>
</body>
</html>

<script src="flv.min.js" type="text/javascript"></script>
<script type="text/javascript">
  /**
   * 创建一个FLV播放器，参数如下：
   * {
   *      container : 视频容器元素
   *      muted     : 是否静音
   *      url       : HTTP-FLV地址
   * }
   */
  function FLVPlayer(opts){
    this.videoElement = document.getElementsByTagName('VIDEO')[0];//videoElement;

    this.httpFlvURL = opts.url;// 视频地址

    this.mediaInfo = null;
    this.play = null;
    this.onPlayEvtListener = null;
    this.onPauseEvtListener = null;
    this.onStopEvtListener = null;

    this.autoFastForward = opts.autoFastForward;
    this.autoFastForwardInterval = null;

    var _that = this;
    // 播放 rtmp/flv
    this.play = function(){
      console.log("播放")
      if (this.player) return;

      _that.player = new flvjs.createPlayer({
        type                            : 'flv',
        url                             : _that.httpFlvURL,
        isLive                          : true,
        enableWorker                    : true,
        enableStashBuffer               : true,
        autoCleanupSourceBuffer         : true,
        autoCleanupMaxBackwardDuration  : 5,
        autoCleanupMinBackwardDuration  : 1
      });

      _that.player.on('media_info', function(){
        _that.mediaInfo = _that.player.mediaInfo;
      });

      //统计信息
      _that.player.on('statistics_info', function(){
        // console.log(arguments);
      });

      var autoPlayTimer = null;
      _that.videoElement.addEventListener('player', function(e){
        if (autoPlayTimer) clearInterval(autoPlayTimer);
        if (_that.onPlayEvtListener) _that.onPlayEvtListener(_that, e);
      });
      _that.videoElement.addEventListener('dblclick', function(){
        if (_that.videoElement.requestFullscreen) _that.videoElement.requestFullscreen();
      });
      autoPlayTimer = setInterval(function(){
        try { _that.player.play(); } catch(e) { clearInterval(autoPlayTimer); };
      });

      _that.player.attachMediaElement(_that.videoElement);
      _that.player.load();
      _that.player.play();

      if (this.autoFastForward) this.autoFastForwardInterval = setInterval(function(){
        if (_that.videoElement.buffered.length > 0 && _that.videoElement.buffered.end(0) - _that.videoElement.currentTime > 2){
          console.log(_that.videoElement.buffered.end(0) + "-" + _that.videoElement.currentTime);
          _that.videoElement.currentTime = _that.videoElement.buffered.end(0) - 1;
        }
      }, 1000);
    };

    //全屏
    _that.fullscreen = function(){
      console.log("全屏")
      if (_that.videoElement && _that.videoElement.requestFullscreen)
        this.videoElement.requestFullscreen();
    };

    //  播放
    _that.onPlay = function(fn){
      console.log("onPlay")
      _that.onPlayEvtListener = fn;
    };

    //暂停  pause
    _that.pause = function(){
      console.log("暂停")
      console.log(_that.player)
      _that.player.pause();
      _that.player.unload();


      clearInterval(this.autoFastForwardInterval);
    }
    //  摧毁
    _that.destroy = function(){
      console.log("摧毁")
      _that.player.destroy();
      clearInterval(this.autoFastForwardInterval);
    }
  }
</script>
<script type="text/javascript">
  if (location.hash){
    var hash = location.hash.substring(1);
    $('#tag').val(hash);
  }
  var videoPlayer;
  function playVideo(){
    videoPlayer = new FLVPlayer({
      url : 'http://172.16.18.233:3333/video/' + document.getElementById("tag").value,//$('#tag').val(),
      // 自动快进追祯，但是可能会导致画面停顿
      autoFastForward : false
    });
    videoPlayer.play();
  }

  //暂停
  function wzSuspended(){
    videoPlayer.pause();
  }

  //停止
  function stopPlay(){
    videoPlayer.destroy()
  }
</script>
